<template>
  <view class="flex items-start text-sm text-gray-600">
    <view
      class="relative h-8 w-8 transition-all duration-200 active:scale-90"
      @click="toggle"
    >
      <!-- 未选中 -->
      <view
        v-if="!checked"
        class="i-carbon-checkbox absolute inset-0 m-auto text-[28px] text-gray-400"
      />

      <!-- 已选中 -->
      <view
        v-else
        class="i-carbon-checkbox-checked absolute inset-0 m-auto text-[28px] text-primary"
      />
    </view>

    <!-- 协议文字 -->
    <view>
      <text>我已阅读并同意</text>

      <text
        class="mx-1 text-blue-500 underline"
        @click="openPrivacy"
      >
        《隐私协议》
      </text>

      <text>和</text>

      <text
        class="mx-1 text-blue-500 underline"
        @click="openUser"
      >
        《用户服务协议》
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { UrlPath } from '@/constants'

interface Props {
  modelValue: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])

const checked = ref(props.modelValue)

watch(() => props.modelValue, v => checked.value = v)

function toggle() {
  checked.value = !checked.value
  emit('update:modelValue', checked.value)
}

function openPrivacy() {
  uni.navigateTo({
    url: `/pages/web-content/web-content?title=隐私协议&url=${UrlPath.privacyUrl}`,
  })
}

function openUser() {
  uni.navigateTo({
    url: `/pages/web-content/web-content?title=用户协议&url=${UrlPath.userProtocolUrl}`,
  })
}
</script>
